<div class="layui-fluid" xmlns:v-on="http://www.w3.org/1999/xhtml">

    <div class="layui-row">
        <div class="layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header">
                    添加电影信息
                </div>
                <div class="layui-card moviesadd" style="padding-top: 20px">
                    <form class="layui-form">
                        <div class="layui-form-item">
                            <label class="layui-form-label">电影名称：</label>
                            <div class="layui-input-block">
                                <input type="text" class="layui-input" name="moviename">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">电影简介：</label>
                            <div class="layui-input-block">
                                <input type="text" class="layui-input" name="description">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">封面图片：</label>
                            <div class="layui-input-block">
                                <input type="text" class="layui-input" name="imgpath">
                                <button class="layui-btn" type="button" v-on:click="openDialog"
                                        style="position: absolute;top: 0;right: 6px;cursor: pointer;">上传
                                </button>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">票价：</label>
                            <div class="layui-input-block">
                                <input type="number" class="layui-input" name="ticketprice">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">导演：</label>
                            <div class="layui-input-block">
                                <input type="text" class="layui-input" name="director">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">总时长：</label>
                            <div class="layui-input-block">
                                <input type="text" class="layui-input" name="time">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">语言：</label>
                            <div class="layui-input-block">
                                <select name="language">
                                    <option value="">请选择</option>
                                    <option value="中文">中文</option>
                                    <option value="日语">日语</option>
                                    <option value="法语">法语</option>
                                    <option value="粤语">粤语</option>
                                    <option value="英文">英文</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">首映日期：</label>
                            <div class="layui-input-block">
                                <input type="text" class="layui-input" name="publishdate">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">票房(亿)：</label>
                            <div class="layui-input-block">
                                <input type="number" class="layui-input" name="boxoffice">
                            </div>
                        </div>
                        <div style="color: #FD482C; text-align: center">{{errMsg}}</div>
                        <div class="layui-form-item">
                            <div class="layui-input-block" style="text-align: center">
                                <button class="layui-btn" type="button" v-on:click="ajaxSubmit">提交</button>
                                <button class="layui-btn" type="button" v-on:click="back">返回</button>
                            </div>
                        </div>

                    </form>
                </div>
            </div>

        </div>
    </div>

</div>
<script type="text/javascript">
    layui.use(['form', 'jquery'], function () {
        var form = layui.form;
        form.render();
    });

    var $ = layui.jquery;
    var layer = layui.layer;
    var movieAdd = new Vue({
        el: '.moviesadd',
        data: {
            errMsg: '',
        },
        methods: {
            /**
             * 修改需要加载当前数据
             */
            loadData: function () {
                window.id = layui.router().search.id;
                if (!id) return;
                $.post("http://localhost:8080/movie/movies/getById.do", {id: id}, function (data) {
                    $("input[name='moviename']").val(data.moviename);
                    $("input[name='description']").val(data.description);
                    $("input[name='ticketprice']").val(data.ticketprice);
                    $("input[name='imgpath']").val(data.imgpath);
                    $("input[name='director']").val(data.director);
                    $("input[name='time']").val(data.time);
                    $("select[name='language']").next().find('.layui-input').eq(0).val(data.language);
                    $("input[name='publishdate']").val(data.publishdate);
                    $("input[name='boxoffice']").val(data.boxoffice);

                }, 'json');
            },
            ajaxSubmit: function () {
                var obj = {};
                if (!$("input[name='moviename']").val()) {
                    this.errMsg = "电影名称不能为空"
                    return;
                }
                obj.moviename = $("input[name='moviename']").val();
                obj.description = $("input[name='description']").val();
                obj.ticketprice = $("input[name='ticketprice']").val();
                obj.imgpath = $("input[name='imgpath']").val();
                obj.director = $("input[name='director']").val();
                obj.time = $("input[name='time']").val();
                obj.language = $("select[name='language']").next().find('.layui-input').eq(0).val();
                obj.publishdate = $("input[name='publishdate']").val();
                obj.boxoffice = $("input[name='boxoffice']").val();
                if(window.id){
                    obj.id = window.id;
                }
                $.ajax({
                    url: "http://localhost:8080/movie/movies/add.do",
                    type: 'post',
                    data: obj,
                    dataType: 'json',
                    async: 'true',
                    success: function (data) {
                        if (data.code != 0) {
                            alert("保存失败！")
                            return;
                        }
                        alert("保存成功！")
                        location.href = '#/movies/query'
                    }
                })

            },
            back: function () {
                location.href = '#/movies/query'
            },
            openDialog: function () {
                layer.open({
                    title: '上传图片',
                    area: ['400px', '300px'],
                    shade: 0,
                    type: 1,
                    content: "<iframe style='width:100%;height:90%;border:0;' src='views/movies/file.html'></iframe>"
                })
            }
        }
    });

    /**
     * 给图片设置路径
     */
    function setImage(image) {
        $("input[name='imgpath']").val(image);
    };
    // 初始化数据
    movieAdd.loadData();
</script>